<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slider-full.css" />
    <style type="text/css">
        header {
            margin-bottom: 15px;
        }
        .aui-btn {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .chart {
            padding: 20px 0;
            margin-top: 20px;
            /*border-bottom: 1px solid #e0e0e0;*/
        }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="padding-top: 20px; position: fixed; z-index: 1000;" >
        <div class="aui-pull-left">
            <i class="aui-iconfont aui-icon-left" onclick="closeWin();"></i>
        </div>
        <div class="aui-title" id="title">统计</div>
        <div class="aui-pull-right">
            <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
        </div>
    </header>
    <div id="header-bottom"></div>
        <div class="chart" id="chart-main" style="height:350px"></div>
        <div class="chart" id="chart-InClass" style="height:360px"></div>
        <div class="chart" id="chart-OutClass" style="height:360px"></div>
<!--     <div class="aui-slider-full">
        <div class="aui-slider-list aui-bg-default">
            <div class="chart" id="chart-main" style="height:350px"></div>
        </div>

        <div class="aui-slider-list aui-bg-default">
            <div class="chart" id="chart-InClass" style="height:360px"></div>
        </div>

        <div class="aui-slider-list aui-bg-default">
            <div class="chart" id="chart-OutClass" style="height:360px"></div>
        </div>

        <span class="aui-slider-up">
            <i class="aui-iconfont aui-icon-top"></i>
        </span>
    </div> -->

    <div class="aui-content-padded aui-margin-b-15">
        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="closeWin();">返回</div></p>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-slider-full.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript" src="../script/echarts.js" ></script>
<script type="text/javascript">
    var type = '';
    var year = 1;
    var month = 1;
    var title = '';
    var chartData = {};
    var toast = new auiToast();
    var chartMain = echarts.init(document.getElementById('chart-main'));
    var chartInClass = echarts.init(document.getElementById('chart-InClass'));
    var chartOutClass = echarts.init(document.getElementById('chart-OutClass'));
    apiready = function(){
        api.parseTapmode();
        //切换为横竖屏模式
        api.setScreenOrientation({
            orientation: 'auto'
        });
        //不支持沉浸式效果
        if (!api.statusBarAppearance) {
            $api.byId('header').style.paddingTop = 0;
        }
        //顶部导航栏高度抵消
        $api.byId('header-bottom').style.marginTop = $api.offset($api.byId('header')).h + 'px';

        //图表大小设置
        chartResize();

        //显示加载动画
        toast.loading({
            title:"加载中",
            duration:2000
        });

        //读取页面配置信息
        if (api.pageParam.month) {
            type = 'month';
            year = api.pageParam.year;
            month = api.pageParam.month;
        } else if (api.pageParam.year) {
            type = 'year';
            year = api.pageParam.year;
        } else {
            $api.byId('title').innerHTML = 'APP出错';
            api.alert({ title: '应用出错', msg: '页面跳转错误，请重新安装APP。' });
            return;
        }

        //初始化数据
        initData();

        //监听分类更新
        api.addEventListener({
            name: 'retClassData'
        }, function(ret, err) {
            initData();
        });

    }

    /** 自适应窗体 */
    window.onresize = chartResize;

    function chartResize() {
        var chartHeight = (api.winHeight - $api.offset($api.byId('chart-main')).t) + 'px';
        $api.byId('chart-main').style.height = chartHeight;
        $api.byId('chart-InClass').style.height = chartHeight;
        $api.byId('chart-OutClass').style.height = chartHeight;
        chartMain.resize();
        chartInClass.resize();
        chartOutClass.resize();
    }

    var sliderFull = new auiSliderFull({direction:'y'});

    /** 初始化数据 */
    function initData() {
        //图表加载动画
        chartMain.showLoading();
        chartInClass.showLoading();
        chartOutClass.showLoading();

        //设置标题
        if (type === 'month') {
            title = year + '年' + month + '月';
            $api.byId('title').innerHTML = '份统计';
        } else if (type === 'year') {
            title = year + '年';
            $api.byId('title').innerHTML = year + '年统计';
        } else {
            $api.byId('title').innerHTML = 'APP出错';
            api.alert({ title: '应用出错', msg: '页面跳转错误，请重新安装APP。' });
            closeWin();
            return;
        }

        //获取图表数据
        getChartData({type:type, date:(Date.parse(new Date(year,month-1,1))/1000)}, function(ret){
            chartData.InMoney = objToArr(ret.InMoney);
            chartData.OutMoney = objToArr(ret.OutMoney);
            chartData.OverMoney = objToArr(ret.SurplusMoney);
            chartData.InClassMoney = objToArr(ret.InClassMoney);
            chartData.OutClassMoney = objToArr(ret.OutClassMoney);
            chartData.InSumMoney = ret.InSumMoney;
            chartData.OutSumMoney = ret.OutSumMoney;
            chartData.InSumClassMoney = objToKeyArr(ret.InSumClassMoney, 0);
            chartData.OutSumClassMoney = objToKeyArr(ret.OutSumClassMoney, 0);
            chartData.OverSumMoney = objToArr(ret.SurplusSumMoney);
            initChartMain();
            toast.hide();            
            setTimeout(function(){
                initChartInClass();
            }, 1000);
            setTimeout(function(){
                initChartOutClass();
            }, 2000);
        });
    }

    /** 获取图标数据 */
    function getChartData(data, callback) {
        // alert(JSON.stringify(data));
        api.ajax({
            url: 'http://qxu1192050221.my3w.com/xxjzApp/index.php/Home/Api/chart',
            method: 'get',
            cache: true,
            data: {
                values: data
            }
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                callback(ret);
            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    /** 填充主图表 */
    function initChartMain() {
        if (type === 'year') {
            yearChartMain();
        } else if (type === 'month') {
            monthChartMain();
        } else {
            return;
        }
    }

    /** 年度主图表 */
    function yearChartMain() {
        chartMain.hideLoading();
        chartMain.setOption({
            title: {
                text: title + '收入与支出金额汇总',
                top: 'top',
                x: 'center'
            },
            color: [
                "#72d572", //绿
                "#f36360", //红
                "#ffb74d", //橙
                "#4fc3f7", //蓝
                "#a1887f", //棕
                "#dce775", //黄
                "#9575cd"  //紫
            ],
            tooltip : {
                trigger: 'axis',
                extraCssText: 'text-align: left;',
                formatter: chartMainFormatter,
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['收入','支出','月剩余','年剩余'],
                selected:{
                    '收入' : true,
                    '支出' : true,
                    '月剩余' : false,
                    '年剩余' : false
                },
                top: 'bottom',
                x: 'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '12%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
            },
            yAxis: {
                type : 'value'
            },
            barGap: '5%',
            series: [{
                name: '收入',
                type: 'bar',
                data: chartData.InMoney,
                animationDelay: function (idx) {
                    return idx * 30;
                }
            },{
                name: '支出',
                type: 'bar',
                data: chartData.OutMoney,
                animationDelay: function (idx) {
                    return idx * 30 + 30;
                }
            },{
                name: '月剩余',
                type: 'line',
                smooth: true,
                data: chartData.OverMoney
            },{
                name: '年剩余',
                type: 'line',
                smooth: true,
                data: chartData.OverSumMoney
            }]
        });
    }

    /** 月份主图表 */
    function monthChartMain() {
        var xData = [];
        for (var i = 1; i <= chartData.OverMoney.length; i++) {
            xData.push(i + '日');
        }
        chartMain.hideLoading();
        chartMain.setOption({
            title: {
                text: title + '收入与支出金额汇总',
                top: 'top',
                x: 'center'
            },
            color: [
                "#72d572", //绿
                "#f36360", //红
                "#ffb74d", //橙
                "#4fc3f7", //蓝
                "#a1887f", //棕
                "#dce775", //黄
                "#9575cd"  //紫
            ],
            tooltip : {
                trigger: 'axis',
                extraCssText: 'text-align: left;',
                formatter: chartMainFormatter,
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['收入','支出','剩余'],
                selected:{
                    '收入' : false,
                    '支出' : false,
                    '月剩余' : true
                },
                top: 'bottom',
                x: 'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '12%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type : 'value'
            },
            barGap: '5%',
            series: [{
                name: '收入',
                type: 'bar',
                data: chartData.InMoney
            },{
                name: '支出',
                type: 'bar',
                data: chartData.OutMoney
            },{
                name: '剩余',
                type: 'line',
                smooth: true,
                data: chartData.OverSumMoney
            }]
        });
    }

    /** 主图表提示框 */
    function chartMainFormatter(params, ticket, callback) {
        // alert(JSON.stringify(params));
        var html = title + params[0].name + '<br />';
        for (var i = 0; i < params.length; i++) {
            html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
            html += params[i].seriesName + '：' + params[i].value + '元<br />';
        }
        callback(ticket, html);
        return html;
    }

    /** 填充收入分类饼图 */
    function initChartInClass() {
        chartInClass.hideLoading();
        chartInClass.setOption({
            title : {
                text: title + '收入分类汇总',
                subtext: '总收入'+ chartData.InSumMoney +'元',
                x:'center'
            },
            color: [
                "#2ec7c9",
                "#b6a2de",
                "#5ab1ef",
                "#ffb980",
                "#d87a80",
                "#8d98b3",
                "#e5cf0d",
                "#97b552",
                "#95706d",
                "#dc69aa",
                "#07a2a4",
                "#9a7fd1",
                "#588dd5",
                "#f5994e",
                "#c05050",
                "#59678c",
                "#c9ab00",
                "#7eb00a",
                "#6f5553",
                "#c14089"
            ],
            //["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee","#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
            tooltip : {
                trigger: 'item',
                formatter: "{b} : ({d}%)<br/>{c} 元"
            },
            series : [
                {
                    name: '收入分类',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: chartData.InSumClassMoney,
                    labelLine : {
                        normal: {
                            smooth: true
                        }
                    },
                    itemStyle: {
                        normal :{
                            borderColor: "#FFF",
                            borderWidth: 1
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    }

    /** 填充支出分类饼图 */
    function initChartOutClass() {
        chartOutClass.hideLoading();
        chartOutClass.setOption({
            title : {
                text: title + '支出分类汇总',
                subtext: '总支出'+ chartData.OutSumMoney +'元',
                x:'center'
            },
            color: [
                "#2ec7c9",
                "#b6a2de",
                "#5ab1ef",
                "#ffb980",
                "#d87a80",
                "#8d98b3",
                "#e5cf0d",
                "#97b552",
                "#95706d",
                "#dc69aa",
                "#07a2a4",
                "#9a7fd1",
                "#588dd5",
                "#f5994e",
                "#c05050",
                "#59678c",
                "#c9ab00",
                "#7eb00a",
                "#6f5553",
                "#c14089"
            ],
            //["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee","#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
            tooltip : {
                trigger: 'item',
                formatter: "{b} : ({d}%)<br/>{c} 元"
            },
            series : [
                {
                    name: '支出分类',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: chartData.OutSumClassMoney,
                    labelLine : {
                        normal: {
                            smooth: true
                        }
                    },
                    itemStyle: {
                        normal :{
                            borderColor: "#FFF",
                            borderWidth: 1
                        },
                        emphasis: {
                            borderWidth: 0,
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    }


    /** 对象转数组 */
    function objToArr(obj) {
        var arr = [];
        for(var key in obj) {
            if (typeof(obj[key]) === 'object') {
                arr[key] = objToArr(obj[key]);
            } else {
                arr.push(obj[key]);
            }
        }
        return arr;
    }

    /** 对象转带键值数组 */
    function objToKeyArr(obj, minValue) {
        var arr = [];
        for(var key in obj) {
            if (typeof(obj[key]) === 'object') {
                arr[key] = objToKeyArr(obj[key]);
            } else {
                if ((typeof(minValue)==='number') && obj[key] <= minValue) {
                    continue;
                }
                arr.push({
                    name: key,
                    value: obj[key]
                });
            }
        }
        if ((typeof(minValue)==='number') && (arr.length === 0)) {
            arr.push({
                name: '无数据',
                value: 0
            });
        }
        return arr;
    }
    
    /** 关闭窗体 */
    function closeWin(){
        //切换为竖屏模式
        api.setScreenOrientation({
            orientation: 'auto_portrait'
        });
        api.closeWin({
        });
    }

</script>
</html>